<template>
    <van-nav-bar title="订单详情" left-text="" left-arrow @click-left="goBack" />
    <section class="aui-flexView">
        <!-- 订单详细 -->
        <section class="aui-scrollView">
            <!-- 订单状态 -->
            <div class="aui-pay-change">
                <div class="aui-flex">
                    <div class="aui-flex-box">
                        <h3>{{ detail.status_text }}</h3>
                    </div>
                    <div class="aui-pay-zfb">
                        <img src="/assets/images/icon-zfb.png" alt="" />
                    </div>
                </div>
            </div>

            <!-- 收货地址 -->
            <div class="aui-flex">
                <div class="aui-flex-add">
                    <img :src="detail.business.avatar_text" alt="" />
                </div>
                <div class="aui-flex-box">
                    <h3>
                        {{ detail.consignee }} <em> {{ detail.mobile }}</em>
                    </h3>
                    <p>{{ detail.region_text }}{{ detail.address }}</p>
                </div>
            </div>

            <!-- 订单商品 -->
            <div class="aui-commodity-bg">
                <div class="item" v-for="item in detail.info">
                    <div class="aui-flex">
                        <div class="aui-commodity-img">
                            <img :src="item.product.thumbs_text" />
                        </div>
                        <div class="aui-flex-box">
                            <h4 class="van-ellipsis">商品名称：{{ item.product.name }}</h4>
                            <p>商品单价：￥{{ item.price }}</p>
                            <span class="aui-barter-time">七天退换</span>
                        </div>
                        <div>
                            <h5>￥{{ item.total }}</h5>
                            <p class="aui-sml-text">X {{ item.pronum }}</p>
                        </div>
                    </div>

                    <div style="text-align: right" v-if="!item.rate && detail.status == '3'">
                        <van-button type="warning" size="small" @click="toRatePeage(item.id)">评价</van-button>
                    </div>
                </div>
            </div>

            <!-- 总价 -->
            <div class="aui-cp-edu b-line">
                <div class="aui-flex aui-flex-ed">
                    <div class="aui-flex-box">
                        订单总价<em style="color: #333">￥{{ detail.amount }}</em>
                    </div>
                </div>
            </div>

            <div class="divHeight b-line"></div>

            <!-- 订单详细内容 -->
            <div class="aui-flex aui-flex-text-sml b-line orderinfo">
                <div class="aui-flex-box">
                    <p>
                        <em>订单号:</em>
                        {{ detail.code }}
                    </p>
                    <p v-if="detail.expresscode">
                        <em>配送物流:</em>
                        中通快递
                    </p>
                    <p v-if="detail.expresscode">
                        <em>物流单号:</em>
                        78758785228480
                    </p>
                    <p>
                        <em>下单时间:</em>
                        {{ detail.createtime }}
                    </p>
                    <p>
                        <em>订单状态:</em>
                        {{ detail.status_text }}
                    </p>
                    <p>
                        <em>订单描述:</em>
                        {{ detail.remark }}
                    </p>
                </div>
            </div>
        </section>

        <footer class="aui-footer aui-footer-fixed">
            <div class="aui-footer-text-info">
                <a href="javascript:;" v-if="detail.status > 0 && detail.status != '4'" @click="toPages(detail.id, '/order/refund')" class="aui-payment">申请退货</a>
            </div>
            <div class="aui-footer-text-info">
                <a href="javascript:;" v-if="detail.status == 0" @click="toPages(detail.id)" class="aui-payment">确认收货</a>
            </div>
        </footer>
    </section>
</template>
<script setup>
const { proxy } = getCurrentInstance()
const detail = ref({
    business: {}
})
const goBack = () => { proxy.$router.push({
    path:'/order/index',
    query:{
        status:detail.value.status
    }})
}

const LoginUser = reactive(proxy.$cookies.get('LoginUser') ? proxy.$cookies.get('LoginUser') : {})
const orderid = proxy.$route.query.orderid ? proxy.$route.query.orderid : 0;
//需要给结构，在对象中有对象的话(ref)

onBeforeMount(() => {
    getOrderInfoData()
})
const getOrderInfoData = async () => {
    let result = await Api.orderInfo({
        busid: LoginUser.id,
        orderid: orderid
    });

    if (result.code == 1) {
        detail.value = result.data
    }
}
const toRatePeage = (orderproid) => {
    proxy.$router.push({
        path: '/order/rate',
        query: {
            orderid: orderid,
            orderproid: orderproid
        }
    })
}

const toPages = (id, url) => {
    if (url) {
        proxy.$router.push({
            path: url,
            query: {
                orderid: id
            }
        })
    }
    else {
        showConfirmDialog({
            title: '确认是否收货?',
        })
            .then(async () => {
                let result = await Api.orderReceipt({
                    busid: LoginUser.id,
                    orderid: id
                });
                if (result.code == 1) {
                    success(result.msg);
                    getOrderData()

                } else {
                    error(result.msg);
                }
            })
            .catch(() => { });
    }
}
</script>
<style>
@import url('/assets/css/info.css');
</style>